<template>
  <div class="statistic">
    <el-row>
      <el-col :span="8">
        <el-statistic title="近一周发布量" :value="weekPublish">
          <template #title>
            近一周发布量
            <el-icon style="vertical-align: -0.125em">
              <Opportunity />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
      <el-col :span="8">
        <el-statistic :value="totalData">
          <template #title>
            发布实习总量
            <el-icon style="vertical-align: -0.125em">
              <UploadFilled />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
      <el-col :span="8">
        <el-statistic :value="totalUser">
          <template #title>
            网站总访问量
            <el-icon style="vertical-align: -0.125em">
              <UserFilled />
            </el-icon>
          </template>
        </el-statistic>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted,ref } from "vue";
import { apiGetStatistic } from "../apis/loginApi";
const totalUser = ref();
const totalData = ref();
const weekPublish = ref();
onMounted(() => {
    apiGetStatistic().then(res=>{
        console.log(res,999)
        totalUser.value = res.totalUser;
        totalData.value = res.totalData;
        weekPublish.value = res.weekPublish;
    })
});
</script>

<style scoped>
.el-col {
  text-align: center;
}

.statistic {
  background-color: white;
  margin-top: 0px;
  padding: 20px;
}
</style>
